@background-color: #1e1f35;
@secondary-color : #4d4d81;
@blue-color      : #1890ff;
@cyan-color      : #33ffff;
@pink-color      : #ff3399;
@yellow-color    : #ffc53d;

@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');

@font-face {
    font-family: "Flama";
    font-weight: normal;
    font-style : normal;
    src        : url('https://cdn.jsdelivr.net/gh/deajax/FontFace-CDN/src/fonts/Flama/Flama-Basic.otf') format('opentype');
}

* {
    box-sizing: border-box;
}

.blue-color {
    color: @blue-color  !important;
}

.cyan-color {
    color: @cyan-color  !important;
}

.pink-color {
    color: @pink-color  !important;
}

.yellow-color {
    color: @yellow-color  !important;
}

body {
    font-size  : 14px;
    line-height: 1.5;
    background : @background-color;
    color      : white;
}

.safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

[class*='ri-'] {
    vertical-align: -2px;
}

#ucenter {
    background: fade(@secondary-color, 45%);

    .van-nav-bar {
        background: none;

        &::after {
            content: none;
        }

        .van-icon {
            color    : white;
            font-size: 20px;
        }

        .van-nav-bar__title {
            font-size: 18px;
            color    : white;
        }
    }
}

.ucenter-header {
    padding: 16px 24px 0;
}

.ucenter-user {
    display      : flex;
    align-items  : center;
    margin-bottom: 24px;

    .avatar {
        width        : 64px;
        height       : 64px;
        display      : inline-block;
        border-radius: 50%;
        border       : 2px solid white;
        overflow     : hidden;
        margin-right : 16px;
    }

    .ucenter-user-info {
        h4 {
            margin     : 0 0 2px;
            font-size  : 18px;
            font-weight: 500;
        }

        .van-tag--warning {
            position    : relative;
            background  : fade(@yellow-color, 15%);
            color       : @yellow-color;
            padding-left: 16px;

            i {
                position : absolute;
                transform: scale(1.6);
                left     : 0;
            }
        }
    }
}

.statistic {
    .van-grid-item__content {
        background: none;

        .statistic-value {
            font-family: 'Flama';
            font-size  : 24px;
            line-height: 1;
        }

        span {
            color: fade(white, 45%);
        }
    }
}

.ucenter-vip {
    background         : @secondary-color url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='205.704' height='80' viewBox='0 0 205.704 80'%3E%3Cpath d='M34.713,92.994c-3.154,0-6.308-3.137-7.885-9.411L0,13H20.514L39.45,61.624l29.982-48.63H91.522L45.761,83.583c-4.734,7.843-7.888,9.411-11.045,9.411Zm50.5-1.571L96.254,14.568H115.19L104.148,91.426H85.211ZM205.136,42.8c-1.577,7.843-4.734,15.685-12.625,21.959-6.311,4.706-14.2,7.843-22.091,7.843H137.281l-3.154,18.825H115.19L121.5,52.21h53.649c3.154,0,4.734-1.569,6.314-3.137s3.154-4.706,3.154-6.274c0-3.137,0-4.706-1.58-6.274s-4.734-3.137-6.311-3.137h-53.65L138.866,13h39.441c7.891,0,15.782,3.137,20.514,7.843C205.136,28.682,206.713,36.525,205.136,42.8Z' transform='translate%280 -12.994%29' fill='rgba%28255,255,255,0.45%29' opacity='0.1'/%3E%3C/svg%3E%0A");
    background-position: left top;
    background-repeat  : no-repeat;
    border-radius      : 8px 8px 0 0;
    padding            : 16px 24px;
    margin             : 0 16px;
    display            : flex;
    align-items        : center;
    justify-content    : space-between;

    .van-button {
        height       : 32px;
        border-radius: 32px;
        background   : @yellow-color;
        border-color : @yellow-color;
        box-shadow   : 0 4px 8px -2px fade(@yellow-color, 15%);
        color        : @background-color;
    }
}

.ucenter-menu {
    padding: 16px;

    .van-grid-item__content {
        background: none;
    }

    .van-grid-item__text {
        color: white;
    }
}

.ucenter-cell-list {
    padding: 0 12px 24px;

    .van-cell-group,
    .van-cell {
        background: none;
        color     : white;

        &::after {
            content: none;
        }
    }

    .van-cell {
        padding: 12px 16px;

        &:active {
            background: fade(white, 4%);
        }
    }

    .van-cell__left-icon {
        margin-right: 8px;
        opacity     : .45;
    }

    .important {
        color: @yellow-color;
    }
}